<!DOCTYPE html>
<html lang="en" xmlns:th="www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <!--CSS-->
    <!--bootstrap V3-->
    <link rel="stylesheet" th:href="@{/css/bootstrap.css}">
    <link rel="stylesheet" th:href="@{/css/bootstrapValidator.css}">
    <!--JS-->
    <script th:src="@{/js/jquery.min.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
    <script th:src="@{/js/bootstrapValidator.js}"></script>
</head>
<style>
    h1{
        padding-top: 10px;
        font-style: italic;
    }

    .container-style{
        background-color: #f9fbff;
        height: 720px;
    }

    .col-top{
        margin-top: 20px;
        border-radius: 8px;
        box-shadow: 0 6px 32px -7px rgba(29, 102, 189, .16);
        height: auto;
        width: 750px;
        background-color: #fff;
    }
    .col-left{
        margin-left: 5px;
    }
    .form-group-div{
        margin-top: 20px;
        height: 50px;
    }
    .star-style{
        color: red;
        margin-left: 5px;
    }
</style>

<body>
<div class="container-fluid container-style">
    <div class="row">
        <div class="col-lg-7 col-lg-offset-3 col-top">
            <h1 style="text-align: center">注册页面</h1>
            <form id="registerForm" method="post" class="form-horizontal" action="">
                <div class="form-group form-group-div">
                    <label class="col-lg-4 control-label">账号<span class="star-style">*</span></label>
                    <div class="col-lg-5">
                        <input type="text" class="form-control" name="account" />
                    </div>
                </div>

                <div class="form-group form-group-div">
                    <label class="col-lg-4 control-label">密码<span class="star-style">*</span></label>
                    <div class="col-lg-5">
                        <input type="password" class="form-control" name="password" />
                    </div>
                </div>

                <div class="form-group form-group-div">
                    <label class="col-lg-4 control-label">确认密码<span class="star-style">*</span></label>
                    <div class="col-lg-5">
                        <input type="password" class="form-control" name="repassword" />
                    </div>
                </div>

                <div class="form-group form-group-div">
                    <label class="col-lg-4 control-label">联系方式<span class="star-style">*</span></label>
                    <div class="col-lg-5">
                        <input type="text" class="form-control" name="tel"/>
                    </div>
                </div>
                
                <div class="form-group form-group-div">
                    <label class="col-lg-4 control-label">姓名<span class="star-style">*</span></label>
                    <div class="col-lg-5">
                        <input type="text" class="form-control" name="username" />
                    </div>
                </div>

                <div class="form-group form-group-div">
                    <label class="col-lg-4 control-label">电子邮箱</label>
                    <div class="col-lg-5">
                        <input type="email" class="form-control" name="email"  data-toggle="popover" data-content="<div style='width:140px;'>没有邮箱可先不填</div>" data-trigger="focus" />
                    </div>
                </div>
                
                <input hidden="hidden" value="3" name="usertype">
                
                <div class="form-group form-group-div">
                    <div class="col-lg-8 col-lg-offset-4">
                        <button type="button" class="btn btn-primary col-left" id="userregister">注册</button>
                        <button type="reset" class="btn btn-primary col-left">重置</button>
                        <button type="button" class="btn btn-primary col-left" data-toggle="popover" data-content="注意:带<span style='color:red'>*</span>号的信息必须填写" data-trigger="focus">注册规则</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function() {
        $("[data-toggle='popover']").popover({
            html: true,
        });
        
        $('#registerForm').bootstrapValidator({
            message: '信息不正确，请重新输入',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                account: {
                    message: '账号不正确',
                    validators: {
                        notEmpty: {
                            message: '账号不能为空'
                        },
                        stringLength: {
                            min: 3,
                            max: 20,
                            message: '账号格式应该为3-20个字符'
                        },
                        remote: {
                            url: "/user/repeatAccount",
                            message: '用户名已经存在,请更换另一个用户名',
                            delay:800,
                        },
                        regexp: {
                            regexp: /^[0-9|a-z|A-Z|\u4e00-\u9fa5]{3,20}$/,
                            message: '账号格式不正确',
                        }
                    }
                },
                password: {
                    validators: {
                        notEmpty: {
                            message: '密码不能为空'
                        },
                        stringLength: {
                            min: 6,
                            max: 20,
                            message: '密码格式应该为6-20个大小写字母或数字'
                        },
                        regexp: {
                            regexp: /^[0-9|a-z|A-Z]{6,20}$/,
                            message: '密码格式不正确'
                        },
                        identical: {//相同
                            field: 'repassword', //需要进行比较的input name值
                            message: '两次密码不一致'
                        }
                    }
                },
                repassword: {
                    validators: {
                        identical: {//相同
                            field: 'password', //需要进行比较的input name值
                            message: '两次密码不一致'
                        }
                    }
                },
                tel: {
                    message: '联系方式不正确',
                    validators: {
                        notEmpty: {
                            message: '联系方式不能为空'
                        },
                        stringLength: {
                            min: 3,
                            max: 20,
                            message: '联系方式格式应该为11个数字'
                        },
                        regexp: {
                            regexp: /^[0-9]{11}$/,
                            message: '账号格式不正确',
                        }
                    }
                },
                username: {
                    message: '姓名不正确',
                    validators: {
                        notEmpty: {
                            message: '姓名不能为空'
                        },
                        stringLength: {
                            min: 2,
                            max: 5,
                            message: '姓名格式应该为2-5个中文汉字'
                        },
                        regexp: {
                            regexp: /^[\u4e00-\u9fa5]{2,5}$/,
                            message: '姓名格式不正确',
                        }
                    }
                },
                email: {
                    message: '邮箱不正确',
                    validators: {
                        emailAddress: {
                            message: '请输入正确的邮件地址如：123@qq.com'
                        }
                    }
                },
            }
        }).on('success.form.bv',function(e) {
            //阻止表单提交
            e.preventDefault();
            // Get the form instance
            var $form = $(e.target);
            // Get the BootstrapValidator instance
            var bv = $form.data('bootstrapValidator');
            //使用ajax提交
            $.post($form.attr('action'),$form.serialize(),function(result) {
                console.log(result);
            },'json');
        });
        
        //用户注册提交
        $('#userregister').on('click',function() {
            $.ajax({
                url: '/user/insertUserInfo',
                type: 'post',
                data: $('#registerForm').serialize(),
                success: function (data) {
                    if (data===1){
                        alert("用户注册成功");
                        window.location.href = '/user/toLogin';
                    }else{
                        alert("用户注册失败");
                        window.location.href = '/user/toRegister';
                    }
                }
            })
        })
    });
</script>

</body>
</html>